<template>
  <div style="min-height: 600px;">
    <Row style="padding: 20px 0px;">
      <Col :span="24">
        <createForm :model="form" :rules="rules" :process="process" :doFetchData="getRoleDetail"  @on-create="handleCreate" @on-edit="handleEdit" :name="isEdit ? 'RoleEditCache' : 'RoleCreateCache'">
          <FormItem label="名称：" prop="name">
            <Input type="text" v-model="form.name" />
          </FormItem>
          <FormItem label="权限：" prop="permission_id">
            <permission-select v-model="form.permission_id" :multiple="true"/>
          </FormItem>
          <FormItem label="选择目录：" prop="menus_id">
            <Timeline >
              <TimelineItem v-for="(item, index) in menus" v-key="index">
                <template #dot >
                  <div @click="handleSelectMenus(item)">
                    <Icon class="select-icon" type="ios-checkmark-circle" v-if="inMenusId(item.id)" color="#2d8cf0"/>
                    <Icon class="select-icon" type="ios-square-outline"  v-else/>
                  </div>

                </template>
                <div class="time" @click="handleSelectMenus(item)">
                  <Icon :type="item.icon" />{{item.name}}  {{item.link}}
                </div>
                <div class="content" v-if="item.children.length > 0">
                  <span v-for="(child, i) in item.children" v-key="i" @click="handleSelectMenus(child)">
                    <Icon class="select-icon" type="ios-checkmark-circle" v-if="inMenusId(child.id)" color="#2d8cf0"/>
                    <Icon class="select-icon" type="ios-square-outline" v-else/>
                    <Tag color="default">{{child.name}}  {{child.link}}</Tag>
                  </span>
                </div>
              </TimelineItem>
            </Timeline>
          </FormItem>

        </createForm>
      </Col>
    </Row>
  </div>
</template>

<script>
import role from "@/api/role"
import {mapState, mapActions} from "vuex"
import createForm from '@/components/common/createForm.vue'
import permissionSelect from '@/components/permissionSelect.vue'
import util from "@/libs/util";

export default {
  name: 'role-form',
  components: {
    createForm,
    permissionSelect,
  },

  data() {
    return {
      searching: false,
      form: {
        name: '',
        permission_id: [],
        menus_id: []
      },

      buttonLoading: false,
      process: false,

      rules: {
        name: [
          { required: true, message: '请填写名称', trigger: 'blur' }
        ],
      }

    }
  },

  mounted() {
    this.fetchMenusList();
  },

  computed: {
    ...mapState({
      mainLoading: state => state.main_loading,
      detail: state => state.role.detail,
      menus: state => state.menus.list
    }),

    isEdit() {
      return this.$route.meta.edit == true
    }
  },

  methods: {
    ...mapActions(['getRoleDetail', 'getMenusList']),


    /**
     * 选择
     * @param item
     */
    handleSelectMenus(item) {
      let inMenus = this.inMenusId(item.id);
      // 判断是否存在
      if (inMenus) {
        this.form.menus_id.splice(this.form.menus_id.findIndex(menus_id => menus_id == item.id),1);
        if (item.children.length > 0) {
          item.children.forEach((child) => {
            let childInMenus = this.inMenusId(child.id);
            if (childInMenus) {
              this.form.menus_id.splice(this.form.menus_id.findIndex(menus_id => menus_id == child.id),1);
            }
          })
        }
      } else {
        if (item.parent_id > 0) {
          let parentInMenus = this.inMenusId(item.parent_id);
          if (!parentInMenus) {
            this.form.menus_id.push(item.parent_id);
          }
        }
        this.form.menus_id.push(item.id);
        if (item.children.length > 0) {
          item.children.forEach((child) => {
            let childInMenus = this.inMenusId(child.id);
            if (!childInMenus) {
              this.form.menus_id.push(child.id);
            }
          })
        }
      }
    },

    /**
     * 验证
     * @param id
     * @returns {boolean}
     */
    inMenusId(id) {
      return this.form.menus_id.includes(id);
    },

    // 查询目录
    fetchMenusList() {
      this.getMenusList({include: 'children', parent_id: 0});
    },

    // 处理编辑
    handleEdit(postData) {
      this.process = true
      delete postData.password;
      role.update(postData, this.detail.id).then(ret => {
        this.process = false
        util.success('编辑成功！')
      }).catch(ret => {
        this.process = false
      })
    },

    // 处理创建
    handleCreate(postData) {
      if(postData.password != postData.repeat_password) {
        util.error('两次输入密码不一致！')
        return false;
      }
      this.process = true
      role.store(postData).then(ret => {
        this.process = false
        util.success('添加成功！')
        this.$router.push({path: '/role'})
      }).catch(ret => {
        this.process = false
      })
    }

  }
}
</script>

<style scoped>
.time{
  font-size: 14px;
  font-weight: bold;
  margin-top: -7px;
}
.content{
  padding-left: 5px;
}
.select-icon {
  margin: 0 10px;
  font-size: 20px;
  vertical-align: middle;
}
</style>
